<template>
  <div class="container">
    <br><br>
    <el-button type="primary" @click="handlerAdd">添加员工</el-button>
    <div class="user-table">
          <el-table :data="workerList" style="width: 100%">
          <el-table-column prop="managerId" label="id" width="40" />
          <el-table-column prop="name" label="姓名" width="80" />
          <el-table-column prop="sex" label="性别" width="80"/>
          <el-table-column prop="identityCardNumber" label="身份证" width="180" />
          <el-table-column prop="phone" label="电话" width="130" />
          <el-table-column prop="hireDate" label="入职时间" width="140" />
          <el-table-column prop="resignationDate" label="离职时间" width="140" />
          <el-table-column prop="description" label="描述" width="80" />
          <el-table-column  label="操作">
               <template #default="scope">
                  <el-button size="small" @click="handlerEdit(scope.row)">
                      编辑
                  </el-button>
                  <el-button size="small" type="danger" @click="deleteManager(scope.row.managerId)" >
                      删除
                  </el-button>
               </template>
          </el-table-column>
        </el-table>
    </div>
     

    <!--用户编辑表格-->
    <el-dialog
          v-model="dialogVisible"
          :title="dialogTitle"
          width="500"
        >
        

         <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="user"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon>
            <el-form-item label="id" prop="mid">
                <el-input v-model="manager.mid" />
            </el-form-item>
            <el-form-item label="姓名" prop="mname">
                <el-input v-model="manager.mname" />
            </el-form-item>
            <el-form-item label="性别" prop="msex">
              <el-radio-group v-model="manager.msex">
                <el-radio value="0">男</el-radio>
                <el-radio value="1">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证" prop="midentity">
              <el-input v-model="manager.midentity" />
            </el-form-item>
            <el-form-item label="电话" prop="mphone">
              <el-input v-model="manager.mphone" />
            </el-form-item>
            <el-form-item label="入职时间" prop="hire">
              <el-input v-model="manager.hire" />
            </el-form-item>
            <el-form-item label="离职时间" prop="resignation">
              <el-input v-model="manager.resignation" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input v-model="manager.description" />
            </el-form-item>
        </el-form>



          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="saveManager">
                 确定
              </el-button>
            </div>
          </template>
    </el-dialog>
  </div>
</template>


<script setup>
import { onMounted,ref } from "vue";
import { ElMessage,ElMessageBox, descriptionItemProps } from 'element-plus'

    const dialogTitle = ref('编辑用户')

    //用户编辑页面是否显示
    const dialogVisible = ref(false)

    //操作类型  add：添加； update:修改
    const optionType = ref('')

    const manager = ref(
        {
          mid: "",
          mname: "",
          msex: "",
          mphone: "",
          midentity: "",
          hire:"",
          resignation:"",
          description:""
      },
    )

    const workerList = ref([]);

    //保存用户数据
    const saveManager = () =>{
         let url = "" ;
         if(optionType.value == 'add'){
            url ="http://localhost:8282/manager/add?name="+manager.value.mname+
                                                   "&sex="+manager.value.msex+
                                                   "&identity_card_number="+manager.value.midentity+
                                                   "&phone="+manager.value.mphone+
                                                   "&hire_date="+manager.value.hire+
                                                   "&resignation_date="+manager.value.resignation+
                                                   "&description="+manager.value.description;
         }else if(optionType.value == 'edit'){
             url ="http://localhost:8282/manager/update?manager_id="+manager.value.mid+
                                                        "&name="+manager.value.mname+
                                                        "&sex="+manager.value.msex+
                                                        "&identity_card_number="+manager.value.midentity+
                                                        "&phone="+manager.value.mphone+
                                                        "&hire_date="+manager.value.hire+
                                                        "&resignation_date="+manager.value.resignation+
                                                        "&description="+manager.value.description;
                                                        }
         console.log(url)
         fetch(url,{
              method:'get',
              headers:{
                   "Authorization":localStorage.getItem("token")
               }
        })
             .then( res => res.json())
             .then( res => {
                 ElMessage({
                  message: '用户信息修改成功',
                  type: 'success',
                })
                 dialogVisible.value = false ;
             })
    }

    //删除用户

    const deleteManager = managerId =>{

         ElMessageBox.confirm(
          '用户删除后不能恢复，是否确认删除?',
          '删除用户',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
             //单击了确认删除按钮
             handlerDel(managerId)
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消了操作',
            })
          })

    }
    
    const handlerDel = managerId =>{
      let url="http://localhost:8282/manager/delete/"+managerId
      console.log(url)
         fetch(url,{
              method:"get",
              headers:{
                   "Authorization":localStorage.getItem("token")
               }        
        })
             .then( res => res.json())
             .then( res => {
                 ElMessage({
                  message: '用户信息删除成功',
                  type: 'success',
                })
                 selectAllManagers();
             })
    }

    //编辑用户
    const handlerEdit = row =>{
        manager.value = row
        optionType.value = 'edit'
        dialogTitle.value = '编辑员工'
        dialogVisible.value = true
    }

    //查询所有用户
    const selectAllManagers = () =>{
        fetch("http://localhost:8282/manager/findAll",{
            method: 'GET',
            mode: 'cors',
             headers:{
                   "Authorization":localStorage.getItem("token")
               }
            
        })
             .then( res => res.json())
             .then( res => {
              console.log(res.message)
              console.log(res.code)
              console.log(res.data)
              workerList.value = res.data
             
                console.log(workerList.value
                )
            }
             )
    }

    //添加用户
    const handlerAdd = () =>{
        manager.value = {}
        optionType.value = 'add'
        dialogTitle.value = '添加员工'
        dialogVisible.value = true ;
    }

    //查询数据的函数
    onMounted(() => {
       selectAllManagers();
    })
</script>
<style scoped>
    .container{
      text-align: center;
    }
    
    table{
        border-collapse: collapse;
        border: 1px solid rgb(8, 8, 8);
        display: inline-block;
    }

    .user-table{
       width: 80%;
       margin: 0 auto;
  }
</style>
